<template>
    <div>
        <Card dis-hover :bordered="false" :shadow="false" :style="treeCardStyle">
            <div class="department-outer">
                <div class="tip-box">
                    <b style="margin-right: 20px;">校区结构树</b>
                    <Button type="text" icon="ios-add" @click="addSchoolWindow" >添加集团</Button>
                </div>
                <div class="zoom-box">
                    <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
                </div>
                <div class="view-box">
                    <org-view
                            v-if="data"
                            :data="data"
                            :zoom-handled="zoomHandled"
                            @on-menu-click="handleMenuClick"
                    ></org-view>
                </div>
            </div>
        </Card>

        <Card :style="detailCardStyle" dis-hover :bordered="false" :shadow="false">
            123
        </Card>

        <Modal  v-model="value" :closable="false" :mask-closable="false">
           <template slot="header" >编辑校区部门</template>
           <Form ref="form" :model="params" :label-width="60" label-position="right">
                <FormItem label="名称" prop="label" :rules="[{required:true,message:'请填写名称',trigger:'blur'},{max:10,message:'只能10个字符以内',trigger:'blur'}]">
                    <Input v-model="params.label" placeholder="请输入名称" :maxlength="10" show-word-limit clearable icon="md-create" />
                </FormItem>
               <FormItem label="地址" prop="address" v-if="params.type != '3'" :rules="[{required:params.type != '3' ? true : false,message:'请填写集团或校区地址',trigger:'blur'},{max:30,message:'只能30个字符以内',trigger:'blur'}]">
                   <Input v-model="params.address" placeholder="请输入集团或校区地址" :maxlength="30" show-word-limit clearable icon="md-create" />
               </FormItem>
            </Form>
            <template slot="footer">
                <Button ghost type="primary" @click="handleSubmit" icon="ios-add" v-loading.fullscreen.lock="fullscreenLoading">确定</Button>
                <Button ghost type="info" @click="cancel" icon="ios-close">取消</Button>
            </template>
        </Modal>

    </div>
</template>

<script>
    import './index.less'
    import * as SchoolApi from '@/api/principal/school-manager/school'
    import { searchSubSchoolAssets } from '@/api/principal/school-manager/assets'
    import { searchTeachersByDepartment } from '@/api/principal/school-manager/teacher'
    const menuDic = {
        edit: '编辑部门',
        //detail: '查看部门',
        new: '新增子部门',
        delete: '删除部门'
    };


    export default {
        name: "school-index.vue",
        components: {
            OrgView:()=>import("@/components/org-tree/org-view.vue"),
            ZoomController:()=>import("@/components/org-tree/zoom-controller.vue")
        },
        data () {
            return {
                data: null,
                parentData:null,
                zoom: 100,
                params:{},
                value:false,
                fullscreenLoading:false,
                treeCardStyle:{height: '600px',width: '100%',marginBottom:'10px'},
                detailCardStyle:{height:'100px',width:'100%',display:'none'}
            }
        },
        computed: {
            zoomHandled () {
                return this.zoom / 100
            }
        },
        methods: {
            setDepartmentData (data) {
                data.isRoot = true;
                return data
            },
            addSchoolWindow(){
                this.parentData = {};
                this.params = {};
                this.params.type = "1";
                this.value = true;
            },
            handleMenuClick ({ data, key }) {
                switch (key) {
                    case 'new':
                        if(data.type === '3'){
                            this.$Message.warning('不能添加子部门');
                            return false;
                        }
                        this.parentData = null;
                        this.params = {};
                        this.parentData = data;
                        this.params.type = (parseInt(data.type) + 1) +"";

                        if(data.type == '1'){
                            this.params.schoolId = data.id;
                        }else if(data.type == '2'){
                            this.params.subSchoolId = data.id;
                        }

                        this.value = true;
                        break;
                    case 'edit':
                        this.params = {};
                        this.params = data;
                        this.parentData = null;
                        this.value = true;
                        break;
                    case 'delete':

                        if(data.type == '1'){
                            if(data.children.length > 0){
                                this.$Message.warning('不能删除该集团');
                                return false;
                            }else{
                                this.remove(data);
                            }
                        }

                        if(data.type == '2'){
                            if(data.children.length > 0){
                                this.$Message.warning('不能删除该校区');
                                return false;
                            }else{
                                searchSubSchoolAssets(data).then(res=>{
                                    if(res.data.data.length > 0){
                                        this.$Message.error("校区包含可用资产,无法删除");
                                        return false;
                                    }else{
                                        this.remove(data);
                                    }
                                })
                            }
                        }
                        if(data.type == '3'){
                            searchTeachersByDepartment(data).then(res=>{
                                if(res.data.data.length > 0){
                                    this.$Message.error("部门包含在职教师,无法删除");
                                }else{
                                    this.remove(data);
                                }
                            })
                        }
                        break;

                }
            },
            remove(data){
                this.$Modal.confirm({
                    title:'友情提示',
                    content:'确定要删除吗?删除后与之关联的所有数据将一并删除,请谨慎操作',
                    onOk:()=>{
                        this.fullscreenLoading = true;
                        SchoolApi.removeSchoolOrSubSchoolOrDepartment(data).then(res=>{
                            this.cancel();
                            this.fullscreenLoading = false;
                        });
                    },
                    onCancel:()=>{
                        this.$Message.info("你取消了操作");
                    }
                });
            },
            getSchoolList () {
                SchoolApi.getSchoolList().then(res=>{
                   this. data = res.data.data;
                });
            },
            handleSubmit(){
                this.$refs['form'].validate(valid=>{
                   if(valid){
                       this.$Modal.confirm({
                           title:'友情提示',
                           content:'确定要添加吗?',
                           onOk:()=>{
                               this.fullscreenLoading = true;
                               SchoolApi.saveOrUpdateBySchoolOrSubSchoolOrDepartment(this.params).then(res=>{
                                   this.cancel();
                                   this.fullscreenLoading = false;
                               })
                           },
                           onCancel:()=>{
                               this.$Message.info("你取消了操作");
                           }
                       });

                   }else{
                       return false;
                   }
                });
            },
            cancel(){
                this.value = false;
                setTimeout(()=>{
                    this.parentData = {};
                    this.params = {};
                    this.getSchoolList();
                },200)
            }
        },
        mounted () {
            this.getSchoolList();
        }
    }
</script>

<style lang="less">
    .ivu-modal-header {
        border-bottom: 1px solid #e8eaec;
        padding: 14px 16px;
        line-height: 1;
        background-color: #409EFF;
        text-align: center;
        color: #F7F7F7;
    }

    .ivu-modal-footer {
        border-top: 0px solid #e8eaec;
        padding: 12px 18px 12px 18px;
        text-align: center;
    }

    .trans(@duration) {
        transition: ~"all @{duration} ease-in";
    }
    .zoom-wrapper {
    .zoom-button {
        width: 20px;
        height: 20px;
        line-height: 10px;
        border-radius: 50%;
        background: rgba(157, 162, 172, 1);
        box-shadow: 0px 2px 8px 0px rgba(218, 220, 223, 0.7);
        border: none;
        cursor: pointer;
        outline: none;
    &:active {
         box-shadow: 0px 0px 2px 2px rgba(218, 220, 223, 0.2) inset;
     }
    .trans(0.1s);
    &:hover {
         background: #1890ff;
     .trans(0.1s);
     }
    }
    .zoom-number {
        color: #657180;
        padding: 0 8px;
        display: inline-block;
        width: 46px;
        text-align: center;
    }
    }
</style>